<template>
	<div class="indexRoot">
		<title>首页</title>
		<div class="ctx">
			<div class="search"><xxl-search placeholder="搜索商家"></xxl-search></div>
			<scroll-view class="scroll" show-scrollbar="false" scroll-y="true" refresher-enabled="true" @refresherrefresh="refresh()"
				:refresher-triggered="isRefresh" @scrolltolower="onToLower">
				<div class="item" @click="toMerchant(item.store.id)" v-for="(item, k) in index.data" :key="k">
					<item :d="item"></item>
				</div>
			</scroll-view>
		</div>
	</div>
</template>

<script>
import item from './item.vue';
import { mapState } from 'vuex';

export default {
	name: 'WorkspaceJsonIndex',

	data() {
		return {
			isRefresh:false
		};
	},

	mounted() {
		this.$store.dispatch('getIndexStoreData')
	},

	computed: {
		...mapState(['index'])
	},
	props: {
		inme: {
			default: false,
		}
	},
	methods: {
		toMerchant(id) {
			uni.navigateTo({
				"url": "/pack_vginfo/index?id="+id
			})
		},
		async refresh() {
			if(this.isRefresh) { return }
			this.isRefresh = true
			let timeout = setTimeout(() => {
				this.isRefresh = false
			}, 3000)
			await this.$store.dispatch('getIndexStoreData')
			clearTimeout(timeout)
			this.isRefresh = false
		},
		onToLower(){
			this.$store.dispatch('getIndexStoreDataMore')
			console.log("??");
		}
	},
	components: {
		item
	}
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';

.indexRoot {
	height: 100%;
}

.ctx {
	height: calc(100% - $uni-nav);
	background: $uni-bg-color-g;
}

.search {
	height: 30px;
	z-index: 10;
}

.scroll {
	height: calc(100% - 30px);
}

.item {
	padding: 10px 8px 0px;
}
</style>